<template>
  <div class="about">
    <bor1 aa='11' bb="22" cc="33" class="box" style="color:red" :borther="borther" @def="fn" @add="addList"></bor1>

    <ul>
        <li v-for="(item,index) in resList" @click="go(item)">
            <span>{{item.name}}</span>----
            <span>{{item.grades}}</span>
            
        </li>
    </ul>



  </div>
</template>
<script>
import bor1 from '@/components/bor1.vue'
export default {
    data() {
        return {
            borther:'我是about的数据',
            list:[],
            resList:[{name:'王泽',grades:'优秀',status:"中",img:'../assets/logo.png'},{name:'赵江龙',grades:'优秀',status:"中"},{name:'李俊楠',grades:'优秀',status:"高"}]
        }
    },
    components:{
       bor1
    },
    methods: {
        fn(val){
            console.log(val);
            console.log('我出发了吗');
        },
        addList(){
            this.list.push('选项一')
            console.log(this.list);
        },
        // 路由跳转的方法  query
        // go(item){
        //     // this.$router 他是一个路由操作对象  里面存放路由的一些方法 
        //     // console.log(this.$router);
        //     // query 传递的数据格式是字符串  如果想要传对象获取数组 必须要JSON.stringify转换为字符串
        //     // query 可以使用name 和path   接受的时候this.$route.query.xxx 
        //     // query的参数 地址栏可见   刷新页面不会丢失
        //     this.$router.push({name:'list',query:{item:JSON.stringify(item)}})
        // }
        //  params 传参
        // params 传参 只能使用name   接受的时候this.$route.params.xxx
        // params传参地址栏不可见  刷新页面参数会消失
        //   怎么样才能让参数刷新不消失 ？？？？本地存储
        // go(item){
        //     this.$router.push({name:'list',params:{item:item}})
        // }
        // 动态路由传参     他的原理就是params   不建议传整个对象或者数组
        go(item){
            this.$router.push(`/list/${item.name}/${item.grades}/${item.status}`)
        }

    },
}
</script>
